<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>DataCamp Light React</title>
    <link rel='shortcut icon' type='image/x-icon' href='https://www.datacamp.com/assets/favicon.ico'/>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" type="text/css" media="screen" />
    <style>
      html, body {
        min-height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        font-family: Lato, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
        font-size: 100%;
        line-height: 1.618em;
        color: #3d4251;
        background: #fafafa;
        scroll-behavior: smooth;
      }

      p, ul, dl {
        max-width: 660px;
      }

      p {
        margin-top: 0;
        margin-bottom: 1rem;
      }

      h1, h2, h3, h4, h5, h6 {
        color: black;
        line-height: 1.618em;
        font-weight: normal;
      }

      h1 {
        font-size: 4.236rem;
        margin-top: 2.618rem;
        margin-bottom: 1.618rem;
      }

      h2 {
        font-size: 2rem;
        margin-top: 4.236rem;
        margin-bottom: 0.618rem;
      }

      h1 + h2, h1 + a + h3 {
        margin-top: 0;
      }

      h3 {
        font-size: 1.618rem;
        margin-top: 2.618rem;
        margin-bottom: 0.618rem;
      }

      h2 + h3, h2 + a + h3 {
        margin-top: 0;
      }

      h4 {
        font-size: 1.294rem;
        margin-top: 1.618rem;
        margin-bottom: 0.618rem;
      }

      h3 + h4, h3 + a + h4 {
        margin-top: 0;
      }

      h5 {
        font-size: 1rem;
        font-weight: bold;
        margin-top: 0.618rem;
        margin-bottom: 0;
      }

      h6 {
        font-size: 0.618rem;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 0;
      }

      a, summary {
        color: #3ac;
        text-decoration: none;
        cursor: pointer;
        border-bottom: 0px solid #3ac;
      }

      a:hover, summary:hover {
        border-bottom-width: 1px;
      }

      a:active, summary:hover {
        text-decoration: none;
      }

      pre {
        line-height: 1.4em;
      }

      p code, ul code, dl code {
        display: inline-block;
        padding: 0 5px;
        border-radius: 4px;
        background: #e6eaeb;
        color: #3d4251;
      }

      dt code {
        font-style: normal;
      }

      ul {
        padding-left: 1.4em;
      }

      dt {
        font-style: italic;
      }

      dd {
        margin-bottom: 1em;
      }

      hr {
        border: 0;
        height: 0;
        border-top: 1px solid rgba(0, 0, 0, .1);
        margin: 2em 0;
      }

      header {
        background: linear-gradient(141deg, #2388b0, #3ac);
      }

      header h1 {
        padding: 0;
        margin: 0;
        font-size: 18px;
        font-weight: normal;
        color: rgba(255, 255, 255, .8);
      }

      main, .container {
        margin: auto;
        max-width: 970px;
        padding: 20px 10px;
      }

      p.lead {
        font-size: 1.4em;
        line-height: 1.4em;
        margin-bottom: 1.4em;
      }

      p.subtitle {
        font-style: italic;
      }

      pre {
        max-width: 100%;
      }

      [data-datacamp-exercise] {
        visibility: hidden;
      }
    </style>

  </head>
  <body>

    <header>
      <div class="container">
        <h1>DataCamp Light</h1>
      </div>
    </header>

    <main>

      <p class="lead">
        With DataCamp Light, anyone can create an interactive learning platform for data science.
      </p>

      <h4>Features</h4>
      <ul>
        <li>Convert any website or blog to an interactive learning platform</li>
        <li>Work for R, Python and shell</li>
        <li>All the heavy lifting for running code is handled by DataCamp servers</li>
      </ul>

      <h4>Contents</h4>
      <ul>
        <li>
          <a href="#examples">Examples</a>
          <ul>
            <li>
              <a href="#example-r">R Exercise</a>
            </li>
            <li>
              <a href="#example-shell">Shell Exercise</a>
            </li>
            <li>
              <a href="#example-python">Python Exercise</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#tutorial">Tutorial</a>
          <ul>
            <li>
              <a href="#tutorial-installation">Installation</a>
            </li>
            <li>
              <a href="#tutorial-exercise">Writing an Exercise</a>
            </li>
            <ul>
              <li>
                <a href="#tutorial-exercise-element">Create the Exercise Element</a>
              </li>
              <li>
                <a href="#tutorial-exercise-learn-blocks">Learn about Exercise Blocks</a>
              </li>
              <li>
                <a href="#tutorial-exercise-create-blocks">Create Exercise Blocks</a>
              </li>
            </ul>
            <li>
              <a href="#tutorial-customizing">Customizing DataCamp Light</a>
            </li>
            <ul>
              <li>
                <a href="#tutorial-customizing-exercise">Exercise Options</a>
              </li>
              <li>
                <a href="#tutorial-customizing-init">Initialize New Exercises</a>
              </li>
              <li>
                <a href="#tutorial-customizing-integrating">Integrating with your own Application</a>
              </li>
            </ul>
          </ul>
        </li>

        <li>
          <a href="#more-examples">More Examples</a>
        </li>
      </ul>


      <hr />

      <a name="examples"></a>
      <h2>Examples</h2>
      <p>
        Try out some exercises and check out the source code for a quick copy-paste.
      </p>

      <div class="exercise">
        <a name="example-r"></a>
        <div class="title">
          <h3>R Exercise</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" id="r-exercise">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
            # Calculate 3 + 4
            3 + 4

            # Calculate 6 + 12
          </code>
          <code data-type="solution">
            # Calculate 3 + 4
            3 + 4

            # Calculate 6 + 12
            6 + 12
          </code>
          <code data-type="sct">
            test_output_contains(&quot;18&quot;, incorrect_msg = &quot;Make sure to add `6 + 12` on a new line. Do not start the line with a `#`, otherwise your R code is not executed!&quot;)
            success_msg(&quot;Awesome! See how the console shows the result of the R code you submitted? Now that you&#39;re familiar with the interface, let&#39;s get down to R business!&quot;)
          </code>
        </div>

        <details>
          <summary>Source Code</summary>
          <pre><code class="language-html">&lt;div data-datacamp-exercise data-lang=&quot;r&quot; data-height=&quot;500&quot; id=&quot;r-exercise&quot;&gt;
  &lt;code data-type=&quot;pre-exercise-code&quot;&gt;# no pec&lt;/code&gt;
  &lt;code data-type=&quot;sample-code&quot;&gt;
    # Calculate 3 + 4
    3 + 4

    # Calculate 6 + 12
  &lt;/code&gt;
  &lt;code data-type=&quot;solution&quot;&gt;
    # Calculate 3 + 4
    3 + 4

    # Calculate 6 + 12
    6 + 12
  &lt;/code&gt;
  &lt;code data-type=&quot;sct&quot;&gt;
    test_output_contains(&amp;quot;18&amp;quot;, incorrect_msg = &amp;quot;Make sure to add `6 + 12` on a new line. Do not start the line with a `#`, otherwise your R code is not executed!&amp;quot;)
    success_msg(&amp;quot;Awesome! See how the console shows the result of the R code you submitted? Now that you&amp;#39;re familiar with the interface, let&amp;#39;s get down to R business!&amp;quot;)
  &lt;/code&gt;
&lt;/div&gt;</code></pre>
        </details>
      </div>

      <div class="exercise">
        <a name="example-shell"></a>
        <div class="title">
          <h3>Shell Exercise</h3>
        </div>
        <div data-datacamp-exercise data-lang="shell" id="shell-example">
          <div data-type="hint">Type <code>cd [directory]</code> to go to [directory].</div>
          <code data-type="sct">
          Ex() >> test_student_typed(r'\s*cd(\s+(\.\.|\~))?\s*',
                                    fixed=False,
                                    msg='Use `cd ..` to go up a level or `cd ~` to return home.')
          </code>
        </div>

        <details>
          <summary>Source Code</summary>
          <pre><code class="language-html">&lt;div data-datacamp-exercise data-lang=&quot;shell&quot; data-height=&quot;500&quot; id=&quot;shell-example&quot;&gt;
  &lt;div data-type=&quot;hint&quot;&gt;Type &lt;code&gt;cd [directory]&lt;/code&gt; to go to [directory].&lt;/div&gt;
  &lt;code data-type=&quot;sct&quot;&gt;
    Ex() &gt;&gt; test_student_typed(r'\s*cd(\s+(\.\.|\~))?\s*',
                              fixed=False,
                              msg='Use `cd ..` to go up a level or `cd ~` to return home.')
  &lt;/code&gt;
&lt;/div&gt;</code></pre>
        </details>
      </div>

      <div class="exercise">
        <a name="example-python"></a>
        <div class="title">
          <h3>Python Exercise</h3>
        </div>

        <div data-datacamp-exercise data-lang="python">
          <code data-type="pre-exercise-code">
            # no pec
          </code>
          <code data-type="sample-code">
            # Create a variable a, equal to 5


            # Print out a

          </code>
          <code data-type="solution">
            # Create a variable a, equal to 5
            a = 5

            # Print out a
            print(a)
          </code>
          <code data-type="sct">
            test_object("a")
            test_function("print")
            success_msg("Great job!")
          </code>
          <div data-type="hint">
            Use the assignment operator (<code>=</code>) to create the variable <code>a</code>.
          </div>
        </div>

        <details>
          <summary>Source Code</summary>
          <pre><code class="language-html">&lt;div data-datacamp-exercise data-lang=&quot;python&quot;&gt;
  &lt;code data-type=&quot;pre-exercise-code&quot;&gt;
    # no pec
  &lt;/code&gt;
  &lt;code data-type=&quot;sample-code&quot;&gt;
    # Create a variable a, equal to 5


    # Print out a

  &lt;/code&gt;
  &lt;code data-type=&quot;solution&quot;&gt;
    # Create a variable a, equal to 5
    a = 5

    # Print out a
    print(a)
  &lt;/code&gt;
  &lt;code data-type=&quot;sct&quot;&gt;
    test_object(&quot;a&quot;)
    test_function(&quot;print&quot;)
    success_msg(&quot;Great job!&quot;)
  &lt;/code&gt;
  &lt;div data-type=&quot;hint&quot;&gt;
    Use the assignment operator (&lt;code&gt;=&lt;/code&gt;) to create the variable &lt;code&gt;a&lt;/code&gt;.
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </details>
      </div>






      <a name="tutorial"></a>
      <h2>Tutorial</h2>


      <a name="tutorial-installation"></a>
      <h3>Installation</h3>
      <p>To install DataCamp Light into your website, just add the following script tag:</p>

      <pre><code class="language-html">&lt;script type=&quot;text/javascript&quot; src=&quot;//cdn.datacamp.com/dcl-react.js.gz&quot;&gt;&lt;/script&gt;</code></pre>


      <a name="tutorial-exercise"></a>
      <h3>Writing an Exercise</h3>
      <a name="tutorial-exercise-element"></a>
      <h4>Create the Exercise Element</h4>
      <p>
        To create an exercise, add a <code>&lt;div&gt;</code> tag with the <code>data-datacamp-exercise</code> property to denote that DataCamp Light should parse this element, and a <code>data-lang="python"</code> property to denote the language of this exercise. Possible options are <code>r</code>, <code>python</code> and <code>shell</code>.
      </p>

      <pre><code class="language-html">&lt;div data-datacamp-exercise data-lang="r"&gt;
  &lt;!-- The exercise specification will go here --&gt;
&lt;/div&gt;</code></pre>

      <a name="tutorial-exercise-learn-blocks"></a>
      <h4>Learn about Exercise Blocks</h4>
      <p>
        An exercise consists of different blocks. You'll be familiar with these
        already if you've created a course on DataCamp.
      </p>
      <p>
        When you start a DataCamp Light exercise, DataCamp prepares the workspace behind the scenes using the <em>pre-exercise code</em>. Then, the <em>sample code</em> is displayed to the student. The student can optionally request a <em>hint</em> if he or she is stuck, or request to see the <em>solution</em>. When the student clicks the &ldquo;Submit&rdquo; button, the <em>sample correctness test</em> is executed to verify the student's solution.
      </p>

      <p>
        You don't have to specify <em>all</em> of these elements in every exercise.
        DataCamp Light will behave slightly differently based on what you
        specify. For example,
      </p>

      <ul>
        <li>If you don't specify an SCT, there will be no &ldquo;Submit&rdquo;
          button: you can just play around with the language. There will instead
          be a &ldquo;Run&rdquo; button that executes all the code in the
          editor.</li>
        <li>If you specify a solution, a button will appear so that your student
          can view and execute the correct solution.If you don't, that button is
          simply not visible.</li>
      </ul>

      <a name="tutorial-exercise-create-blocks"></a>
      <h4>Create Exercise Blocks</h4>
      <p>
        To specify these blocks in your exercise, add a <code>&lt;code&gt;</code> element
        within the exercise <code>&lt;div&gt;</code> and specify the type by adding a
        <code>data-type="_____"</code> attribute. For example:
      </p>

      <h5>Pre-exercise code</h5>
      <p>
        This code will be run <em>before</em> any other code. This is useful
        if you want to load some packages or initialize some variables
        beforehand.
      </p>
      <pre><code class="lang-html">&lt;code data-type=&quot;pre-exercise-code&quot;&gt;
	# This will get executed each time the exercise gets initialized
	b = 6
&lt;/code&gt;</code></pre>

      <h5>Sample code</h5>
      <p>
        This code will be present in the editor when your student opens the
        page.
      </p>
      <pre><code class="lang-html">&lt;code data-type=&quot;sample-code&quot;&gt;
	# Create a variable a, equal to 5


	# Print out a

&lt;/code&gt;</code></pre>

      <h5>Solution</h5>
      <p>
        The code that you consider "correct". This will show up when the user
        presses the "Solution" button.
      </p>

      <pre><code class="lang-html">&lt;code data-type=&quot;solution&quot;&gt;
	# Create a variable a, equal to 5
	a &amp;lt;- 5

	# Print out a
	print(a)
&lt;/code&gt;</code></pre>

      <h5>Pre-exercise code</h5>
      <p>
        This is the code that will check if your student's code is correct or not. For more information, look at the <a href="https://github.com/datacamp/testwhat">documentation for R</a> and the <a href="https://github.com/datacamp/pythonwhat">documentation for Python</a>.
      </p>
      <pre><code class="lang-html">&lt;code data-type=&quot;sct&quot;&gt;
	test_object(&quot;a&quot;)
	test_function(&quot;print&quot;)
	success_msg(&quot;Great job!&quot;)
&lt;/code&gt;</code></pre>

      <h5>Hint</h5>
      <p>
        This will be shown when the student presses the &ldquo;Hint&rdquo; button.
      </p>

      <pre><code class="lang-html">&lt;div data-type=&quot;hint&quot;&gt;Use the assignment operator (&lt;code&gt;&amp;lt;-&lt;/code&gt;) to create the variable &lt;code&gt;a&lt;/code&gt;.&lt;/div&gt;</code></pre>


      <a name="tutorial-customizing"></a>
      <h3>Customizing DataCamp Light</h3>

      <a name="tutorial-customizing-exercise"></a>
      <h4>Exercise Options</h4>
      <p>
        Use these properties on your <code>&lt;div&gt;</code> to customize DataCamp Light's appearance:
      </p>

      <dl>
        <dt><code>data-datacamp-exercise</code></dt>
        <dd>Required. Marks this block as an exercise.</dd>

        <dt><code>data-lang="myLanguage"</code></dt>
        <dd>Required. Replace <code>myLanguage</code> with the language of your exercise. Options are: <code>r</code>, <code>python</code> and <code>shell</code>.</dd>

        <dt><code>data-height="300"</code></dt>
        <dd>Specify the height of the exercise in pixels. The default and minimum value are both 300.</dd>

        <dt><code>data-show-run-button</code></dt>
        <dd>Add this property to always show the &ldquo;Run&rdquo; button, so the student can execute his code without submitting it.</dd>

        <dt><code>data-no-lazy-load</code></dt>
        <dd>Add this property to load all exercises immediately, without waiting for them to become visible on the page. This will reduce performance, but can fix compatibility issues with iFrame-based pages.</dd>
      </dl>


      <a name="tutorial-customizing-initialize"></a>
      <h4>Initialize New Exercises</h4>
      <p>
        If you added new exercise after the page was loaded (for example, in single-page applications),
        you can manually ask DataCamp Light to find new exercises by executing the following JavaScript code:
      </p>
      <pre><code class="lang-javascript">DCL.init();</code></pre>


      <a name="tutorial-customizing-integrating"></a>
      <h4>Integrating with Your Own Application</h4>
      <p>
        If you want to keep track of your student's progress, DataCamp Light exposes a few events you can listen to.
      </p>
      <p>
        First, be sure to manually specify an <code>id</code> for every exercise. If there is no <code>id</code>
        present, a random UUID will be chosen.
      </p>
      <p>
        All the exercises are exposed in a global <code>DCL.instances</code> object, where the key is the
        <code>id</code> you specified. You can listen to their events by calling
        <code>on(eventType, callback)</code> to add a callback. For example,
      </p>

      <pre><code class="lang-javascript">DCL.instances["my-exercise-1"].on("feedback", payload => {
  if (payload.correct) {
    alert("You rock!");
  }
});</code></pre>

      <p>The following events are currently supported:</p>

      <dl>
        <dt><code>start</code></dt>
        <dd>Payload: <code>undefined</code>. Triggered when a session is started. This happens the first time a
          user clicks within the exercise and when the session is restarted.</dd>

        <dt><code>submit</code></dt>
        <dd>Payload: <code>{ code: string }</code>. Triggered when the student submitted code.</dd>

        <dt><code>feedback</code></dt>
        <dd>Payload: <code>{ correct: boolean, content: string }</code>. Triggered when feedback from the
          correctness test is received. The <code>content</code> is the feedback that is shown to the user.</dd>
      </dl>



      <a name="more-examples"></a>
      <h2>More Examples</h2>


      <h3>Python playground with a plot</h3>
      <p>If you omit the <code>sct</code> (sample correctness test), you can just use DataCamp Light to play with the code.</p>
      <div class="exercise">
        <div data-datacamp-exercise data-lang="python" data-height="auto">
          <code data-type="pre-exercise-code"></code>
          <code data-type="sample-code">
        import numpy as np
        import matplotlib.pyplot as plt

        x = np.arange(0, 5, 0.1);
        y = np.sin(x)
        plt.plot(x, y)
        plt.show()
          </code>
          <code data-type="solution"></code>
          <code data-type="sct"></code>
          <div data-type="hint">Just press 'Run'.</div>
        </div>
      </div>

      <div class="exercise">
        <div class="title">
          <h3>Exercise + Playground</h3>
          <p>Add <code>data-show-run-button</code> to the exercise tag to always show the "Run" button, so your visitors can try out the code without submitting it.</p>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="auto" data-show-run-button>
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # An addition
        5 + 5

        # A subtraction
        5 - 5

        # A multiplication
        3 * 5

        # A division
        (5 + 5) / 2

        # Exponentiation


        # Modulo



        # End
          </code>
          <code data-type="solution">
        # An addition
        5 + 5

        # A subtraction
        5 - 5

        # A multiplication
        3 * 5

        # A division
        (5 + 5) / 2

        # Exponentiation
        2 ^ 5

        # Modulo
        28 %% 6
          </code>
          <code data-type="sct">
        msg = &quot;Do not remove the other arithmetic examples!&quot;
        test_output_contains(&quot;2^5&quot;, incorrect_msg = &quot;The exponentiation
        example
        is not correct. Write `2 ^ 5` on a new line.&quot;)
        test_output_contains(&quot;28 %% 6&quot;, incorrect_msg = &quot;There seems to be an
        issue with the modulo example. Write `28 %% 6` on a new line.&quot;)
        success_msg(&quot;Great! Head over to the next exercise.&quot;)
          </code>
          <div data-type="hint">
            <p>Another example of the modulo operator:
              <code>9 %% 2</code> equals
              <code>1</code>.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>Variable assignment</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Assign the value 42 to x
        x &lt;-

        # Print out the value of the variable x
        x
          </code>
          <code data-type="solution">
        # Assign the value 42 to x
        x &lt;- 42

        # Print out the value of the variable x
        x
          </code>
          <code data-type="sct">
        test_object(&quot;x&quot;, undefined_msg = &quot;Make sure to define a variable `x`.&quot;,
        incorrect_msg = &quot;Make sure that you assign the correct value to `x`.&quot;)
        success_msg(&quot;Good job! Have you noticed that R does not print the value of a
        variable to the console when you did the assignment? `x &lt;- 42` did not generate
        any
        output, because R assumes that you will be needing this variable in the future.
        Otherwise you wouldn&#39;t have stored the value in a variable in the first place,
        right? Proceed to the next exercise!&quot;)
          </code>
          <div data-type="hint">
            <p>Look at how the value 4 was assigned to
              <code>my_variable</code> in the exercise&#39;s assignment. Do the exact same
              thing
              in the editor, but now assign 42 to the variable
              <code>x</code>.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>Variable assignment (2)</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Assign the value 5 to the variable my_apples


        # Print out the value of the variable my_apples
          </code>
          <code data-type="solution">
        # Assign the value 5 to the variable my_apples
        my_apples &lt;- 5

        # Print out the value of the variable my_apples
        my_apples
          </code>
          <code data-type="sct">
        test_object(&quot;my_apples&quot;,
        undefined_msg = &quot;Please make sure to define a variable `my_apples`.&quot;,
        incorrect_msg = &quot;Make sure that you assign the correct value to `my_apples`.&quot;)
        test_output_contains(&quot;my_apples&quot;, incorrect_msg = &quot;Have you
        explicitly
        told R to print out the `my_apples` variable to the console?&quot;)
        success_msg(&quot;Great! Continue to the next exercise!&quot;)
          </code>
          <div data-type="hint">
            <p>Remember that if you want to assign a number or an object to a variable in R, you
              can
              make use of the assignment operator
              <code>&lt;-</code>. Alternatively, you can use
              <code>=</code>, but
              <code>&lt;-</code> is widely preferred in the R community.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>Variable assignment (3)</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Assign a value to the variables my_apples and my_oranges
        my_apples &lt;- 5


        # Add these two variables together


        # Create the variable my_fruit
          </code>
          <code data-type="solution">
        # Assign a value to the variables my_apples and my_oranges
        my_apples &lt;- 5
        my_oranges &lt;- 6

        # Add these two variables together
        my_apples + my_oranges

        # Create the variable my_fruit
        my_fruit &lt;- my_apples + my_oranges
          </code>
          <code data-type="sct">
        test_object(&quot;my_apples&quot;, incorrect_msg = &quot;Keep the line that assigns
        5 to
        `my_apples`.&quot;)
        test_object(&quot;my_oranges&quot;, incorrect_msg = &quot;Keep the line that assigns
        6
        to `my_oranges`.&quot;)
        test_output_contains(&quot;my_apples + my_oranges&quot;,
        incorrect_msg = &quot;Make sure to print out the result of adding `my_apples` and
        `my_oranges`. The code example in the description already gives away the answer to
        this
        instruction!&quot;)
        msg &lt;- &quot;Have you used `my_fruit &lt;- my_apples + my_oranges` to create the
        `my_fruit` variable?&quot;
        test_object(&quot;my_fruit&quot;, undefined_msg = msg, incorrect_msg = msg)
        success_msg(&quot;Nice one! The great advantage of doing calculations with variables
        is
        reusability. If you just change `my_apples` to equal 12 instead of 5 and rerun the
        script, `my_fruit` will automatically update as well. Continue to the next exercise.&quot;)
          </code>
          <div data-type="hint">
            <p>
              <code>my_fruit</code> is just the sum of
              <code>my_apples</code> and
              <code>my_oranges</code>. You can use the
              <code>+</code> operator to sum the two and
              <code>&lt;-</code> to assign that value to the variable
              <code>my_fruit</code>.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>Apples and oranges</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Assign a value to the variable my_apples
        my_apples &lt;- 5

        # Fix the assignment of my_oranges
        my_oranges &lt;- &quot;six&quot;

        # Create the variable my_fruit and print it out
        my_fruit &lt;- my_apples + my_oranges
        my_fruit
          </code>
          <code data-type="solution">
        # Assign a value to the variable my_apples
        my_apples &lt;- 5

        # Fix the assignment of my_oranges
        my_oranges &lt;- 6

        # Create the variable my_fruit and print it out
        my_fruit &lt;- my_apples + my_oranges
        my_fruit
          </code>
          <code data-type="sct">
        test_error(incorrect_msg = &quot;You can do this by setting the `my_oranges`
        variable to
        a numeric value, not a string!&quot;)
        test_object(&quot;my_apples&quot;, incorrect_msg = &quot;Make sure that `my_apples`
        still contains `5`.&quot;)
        test_object(&quot;my_oranges&quot;, incorrect_msg = &quot;Make sure that
        `my_oranges` is
        equal to `6`.&quot;)
        test_object(&quot;my_fruit&quot;, incorrect_msg = &quot;The value of `my_fruit` is
        not
        correct. It should be 11, the sum of `my_apples` and `my_oranges`.&quot;)
        test_output_contains(&quot;my_fruit&quot;, incorrect_msg = &quot;Don&#39;t remove
        the
        line that prints out `my_fruit`.&quot;)
        success_msg(&quot;Awesome, keep up the good work! Continue to the next exercise.&quot;)
          </code>
          <div data-type="hint">
            <p>You have to assign the numeric value
              <code>6</code> to the
              <code>my_oranges</code> variable instead of the character value
              <code>&quot;six&quot;</code>. Note how the quotation marks are used to indicate
              that
              <code>&quot;six&quot;</code> is a character.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>Basic data types in R</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Change my_numeric to be 42
        my_numeric &lt;- 42.5

        # Change my_character to be &quot;universe&quot;
        my_character &lt;- &quot;some text&quot;

        # Change my_logical to be FALSE
        my_logical &lt;- TRUE
          </code>
          <code data-type="solution">
        # Change my_numeric to be 42
        my_numeric &lt;- 42

        # Change my_character to be &quot;universe&quot;
        my_character &lt;- &quot;universe&quot;

        # Change my_logical to be FALSE
        my_logical &lt;- FALSE
          </code>
          <code data-type="sct">
        test_object(&quot;my_numeric&quot;, incorrect_msg = &quot;Have you correctly changed
        the
        declaration of `my_numeric` so it contains the value 42?&quot;)
        test_object(&quot;my_character&quot;, incorrect_msg = &quot;Have you correctly
        changed
        `my_character` to `\&quot;universe\&quot;`? Don&#39;t forget the quotes!&quot;)
        test_object(&quot;my_logical&quot;, incorrect_msg = &quot;Have you correctly changed
        `my_logical` to `FALSE`? All letters of `FALSE` should be capitalized!&quot;)
        success_msg(&quot;Great work! Continue to the next exercise.&quot;)
          </code>
          <div data-type="hint">
            <p>Replace the values in the editor with the values that are provided in the
              exercise.
              For example:

              <code>my_numeric &lt;- 42</code> assigns the value 42 to the variable
              <code>my_numeric</code>.
            </p>
          </div>
        </div>
      </div>
      <div class="exercise">
        <div class="title">
          <h3>What's that data type?</h3>
        </div>
        <div data-datacamp-exercise data-lang="r" data-height="350">
          <code data-type="pre-exercise-code"># no pec</code>
          <code data-type="sample-code">
        # Declare variables of different types
        my_numeric &lt;- 42
        my_character &lt;- &quot;universe&quot;
        my_logical &lt;- FALSE

        # Check class of my_numeric
        class(my_numeric)

        # Check class of my_character


        # Check class of my_logical
          </code>
          <code data-type="solution">
        # Declare variables of different types:
        my_numeric &lt;- 42
        my_character &lt;- &quot;universe&quot;
        my_logical &lt;- FALSE

        # Check class of my_numeric
        class(my_numeric)

        # Check class of my_character
        class(my_character)

        # Check class of my_logical
        class(my_logical)
          </code>
          <code data-type="sct">
        msg &lt;- &quot;Do not change the declaration of the variables!&quot;
        lapply(c(&quot;my_numeric&quot;, &quot;my_character&quot;, &quot;my_logical&quot;),
        test_object, undefined_msg = msg, incorrect_msg = msg)
        patt &lt;- &quot;Have you included `class(%1$s)` to print out the data type of
        `%1$s`?&quot;
        test_output_contains(&quot;class(my_numeric)&quot;,
        incorrect_msg = &quot;Do not remove the code that prints out the type of
        `my_numeric`.&quot;)
        test_output_contains(&quot;class(my_character)&quot;,
        incorrect_msg = sprintf(patt, &quot;my_character&quot;))
        test_output_contains(&quot;class(my_logical)&quot;,
        incorrect_msg = sprintf(patt, &quot;my_logical&quot;))
        success_msg(&quot;Congratulations! This was the last exercise for this chapter. Head
        over to the next chapter to get immersed in the world of vectors!&quot;)
          </code>
          <div data-type="hint">
            <p>The code that prints the data type of
              <code>my_numeric</code> is already included; do a similar things for
              <code>my_character</code> and
              <code>my_logical</code>.
            </p>
          </div>
        </div>
      </div>
    </main>

    <script async src="./dcl-react.js.gz"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

  </body>
</html>
